<template>
    <div class="gamesmenu">
        <section v-for="one in gamesMenu" class="clearfloat gameBox">
            <img class="floatLeft imgLogo" :src="one.imgUrl" alt="">
            <div class="floatLeft gameInfo">
                <h2>{{one.name}}</h2>
                <p>{{one.details}}</p>
                <button class="startGame" @touchend="start(one.router)">{{one.canDo.startGame}}</button>
            </div>
        </section>
    </div>
</template>

<script>

    import snakeImg from '../../../assets/imgs/gamesLogo/snake/snake.png'
    export default {
        name: '',
        data() {
            return {
                gamesMenu: [
                    {
                        name: 'Find the only difference',
                        details:'找出其中唯一一个不同色块。',
                        router: '/visot/games/colorfulColor',
                        imgUrl: snakeImg,
                        canDo: {   //可以执行的操作
                            startGame: '开始游戏'
                        }
                    },
                    {
                        name: '贪吃蛇',
                        router: '#',
                        imgUrl: snakeImg,
                        canDo: {   //可以执行的操作
                            startGame: '开始游戏'
                        }
                    },
                ]
            }
        },
        components: {

        },
        methods:{
            start(router){
               this.$store.commit('goto',router)
            },


            resize(){
                $('.gameInfo').css({
                    width:$(window).width()-110
                })
            }
        },
        mounted() {
            this.resize()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .gamesmenu{
        width: 100%;
        height: 100%;
        overflow-y: scroll
    }
    .gameBox{
        padding: 5px;
        height: 110px;
        border-bottom: 1px solid rgba(10, 10, 10, 0.452);
        box-sizing: border-box;
        text-align: left;
    }
    .imgLogo {
        width: 100px;
    }
    .gameInfo{
        position: relative;
        height: 100%;
    }
    .gameInfo h2{
        font-size: 16px;
    }
    .gameInfo p{
        font-size: 12px;
        overflow: hidden;  /* 自动隐藏文字 */
        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
        white-space: nowrap;/*强制不换行*/
    }
    .startGame{
        position: absolute;
        right: 0px;
        bottom: 0;
        /* border: none; */
    }
</style>